<!DOCTYPE html>
<html>
	<head>
		<title>CS147 Portfolio, Day 1</title>
        <script>
        function init() {
            var bioLink = document.getElementById("bio-link");
            var container = document.getElementById("container");
            var backHome =  document.getElementById("back-home");
            bioLink.addEventListener("mousedown", function(){
                container.className = "flipped";
                return false;
            }, false);
            backHome.addEventListener("mousedown", function(){
                container.className = "";
                return false;
            }, false);
            
        }
        </script>
		<!-- <link rel="stylesheet" href="week02.css" type="text/css" media="screen" title="no title" charset="utf-8"> -->
		<link rel="stylesheet" href="week03.css" type="text/css" media="screen" title="no title" charset="utf-8">		
	</head>
	<body onload='init()'>
	    <div id="container">
    	    <div id="home-screen">
        		<div class='content'>
        			<div id="info">
        				<div id='fullname'>Joe <span id='last-name'>Student</span></div>
        				<div id="tagline">joe@student.com<br/>Interface Designer</div>
        			</div>
        			<div class="clear"></div>
        			    <a href="#" id="bio-link">See bio</a>

        			<div id='assignments'>
        				<h2>Course work</h2>
        				<ul>
        					<li><a href="how-might-we.html">How Might We?</a></li>
        					<li><a href="inspiration.html">Inspiration</a></li>
        					<li><a href="discovery.html">Discovery</a></li>
        				</ul>
        			</div>
        			<!-- we need this for our float layout -->
        			<div class='clear'></div>
        		</div>
        	</div>
    		<div id='bio'>
        		<div class='content'>
            		<h2>Bio</h2>
                    This is my bio.<br/>
            			<a href="#" id="back-home">Back home</a>
            	</div>
    		</div>
		</div>
    	    
	</body>
</html>